import * as ReactDOM from 'react-dom'
import * as React from 'react'
import { AppContainer as HotContainer } from 'react-hot-loader'
import App from './App'
import './index.less'

const renderRoot = (app: JSX.Element) => {

  const div = document.createElement('div')
  div.id = 'kgassist_app'
  document.body.appendChild(div)
  ReactDOM.render(app, document.getElementById('kgassist_app'))
}

if (process.env.NODE_ENV === 'production') {
  renderRoot((
    <App />
  ))
} else {
  // webpack hot reload interface
  renderRoot((
    <div>
      <HotContainer>
        <App />
      </HotContainer>
    </div>
  ))
  if ((module as any).hot) {
    (module as any).hot.accept('./App', async () => {
      console.log('update by module.hot')
      const NextApp = (await import('./App')).default
      renderRoot((
        <div>
          <HotContainer>
            <NextApp />
          </HotContainer>
        </div>
      ))
    })
  }

}
